<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="#">

    <title>Fab Admin - Dashboard  Editable Tables </title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../static/bower_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- Data Table-->
	<link rel="stylesheet" type="text/css" href="../../static/bower_components/datatable/datatables.min.css"/>
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../static/css/bootstrap-extend.css">	
	
	<!-- Theme style -->
	<link rel="stylesheet" href="../../static/css/master_style.css">
	
	<!-- horizontal menu style -->
	<link rel="stylesheet" href="../../static/css/horizontal_menu_style.css">

	<!-- Fab Admin skins -->
	<link rel="stylesheet" href="../../static/css/skins/_all-skins.css">
	<link rel="stylesheet" href="../../static/bower_components/font-awesome/css/font-awesome.min.css" />
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

</head>

<body class="hold-transition skin-blue layout-top-nav">
<div class="wrapper">

  <header class="main-header">
	<div class="inside-header">
		<!-- Logo -->
		<a href="index.html" class="logo">
		  <!-- mini logo for sidebar mini 50x50 pixels -->
		  <b class="logo-mini">
			  <span class="light-logo"><img src="../../../images/logo-light.png" alt="logo"></span>
			  <span class="dark-logo"><img src="../../../images/logo-dark.png" alt="logo"></span>
		  </b>
		  <!-- logo for regular state and mobile devices -->
		  <span class="logo-lg">
			  <img src="../../../images/logo-light-text.png" alt="logo" class="light-logo">
			  <img src="../../../images/logo-dark-text.png" alt="logo" class="dark-logo">
		  </span>
		</a>
		<!-- Header Navbar -->
		<nav class="navbar navbar-static-top">
		  <!-- Sidebar toggle button-->
		  <a href="#" class="sidebar-toggle d-block d-lg-none" data-toggle="push-menu" role="button">
			<span class="sr-only">Toggle navigation</span>
		  </a>
		  <div class="btn-group d-none d-lg-block">
			 <button class="btn dropdown-toggle mr-10 btn-outline btn-white" type="button" data-toggle="dropdown">Dashboard</button>
			 <div class="dropdown-menu">
				<a class="dropdown-item" href="http://html-templates.multipurposethemes.com/bootstrap-4/admin/fab-admin/src/"><i class="fa fa-dashboard w-30"></i>Main Dashboard</a>
				<a class="dropdown-item" href="http://html-templates.multipurposethemes.com/bootstrap-4/admin/fab-admin/ecommerce-dashboard/"><i class="fa fa-shopping-basket w-30"></i>eCommerce Dashboard</a>
				<a class="dropdown-item" href="http://html-templates.multipurposethemes.com/bootstrap-4/admin/fab-admin/hospital-dashboard/"><i class="fa fa-heartbeat w-30"></i>Hospital Dashboard</a>
				<a class="dropdown-item" href="http://html-templates.multipurposethemes.com/bootstrap-4/admin/fab-admin/horizontal-nav/main"><i class="fa fa-bars w-30"></i>Horizontal Nav Dashboard</a>
				<a class="dropdown-item" href="http://html-templates.multipurposethemes.com/bootstrap-4/admin/fab-admin/horizontal-nav/real-estate-dashboard"><i class="fa fa-building w-30"></i>Real Estate Dashboard</a>
			 </div>
		  </div>
		  <ul class="navbar-nav mr-auto mt-md-0">		
			<!-- .Megamenu -->
			<li class="nav-item dropdown mega-dropdown"> <a class="nav-link dropdown-toggle" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-th-large"></i></a>
				<div class="dropdown-menu scale-up-down">
					<ul class="mega-dropdown-menu row">
						<li class="col-lg-3 col-md-3 col-12 m-b-30">
							<h5 class="m-b-20">Apps</h5>
							<!-- List style -->
							<ul class="list-style-none">
								<li><a href="../app/app-ticket.html">Support Ticket</a></li>
								<li><a href="../app/app-chat.html">Chats App</a></li>
								<li><a href="../app/profile.html">Profile App</a></li>
								<li><a href="../app/calendar.html">Calendar App</a></li>
							</ul>
						</li>
						<li class="col-lg-3 col-md-3 col-12 m-b-30">
							<h5 class="m-b-20">Widgets</h5>
							<!-- List style -->
							<ul class="list-style-none">
								<li><a href="../widgets/weather.html">Weather Widgets</a></li>
								<li><a href="../widgets/blog.html">Blog Widgets</a></li>
								<li><a href="../widgets/chart.html">Chart Widgets</a></li>
								<li><a href="../widgets/social.html">Social Widgets</a></li>
							</ul>
						</li>
						<li class="col-lg-3 col-md-3 col-12 m-b-30">
							<h5 class="m-b-20">Charts</h5>
							<!-- List style -->
							<ul class="list-style-none">
								<li><a href="../charts/chartjs.html">ChartJs</a></li>
								<li><a href="../charts/flot.html">Flot Charts</a></li>
								<li><a href="../charts/morris.html">Morris Charts</a></li>
								<li><a href="../charts/inline.html">Inline charts</a></li>
							</ul>
						</li>
						<li class="col-lg-3 col-md-3 col-12 m-b-30">
							<h5 class="m-b-20">Extra Pages</h5>
							<!-- List style -->
							<ul class="list-style-none">
								<li><a href="../samplepage/invoice.html">Invoice</a></li>
								<li><a href="../samplepage/login.html">Login</a></li>
								<li><a href="../samplepage/404.html">404</a></li>
								<li><a href="../samplepage/maintenance.html">Maintenance</a></li>
							</ul>
						</li>
					</ul>
				</div>
			  </li>
			<!-- /.Megamenu -->
		</ul>	

		  <div class="navbar-custom-menu">
			<ul class="nav navbar-nav">

			  <li class="search-box">
				<a class="nav-link hidden-sm-down" href="javascript:void(0)"><i class="mdi mdi-magnify"></i></a>
				<form class="app-search" style="display: none;">
					<input type="text" class="form-control" placeholder="Search &amp; enter"> <a class="srh-btn"><i class="ti-close"></i></a>
				</form>
			  </li>			

			  <!-- Messages -->
			  <li class="dropdown messages-menu">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
				  <i class="fa fa-"></i>
				</a>
				<ul class="dropdown-menu scale-up">
				  <li class="header">You have 5 messages</li>
				  <li>
					<!-- inner menu: contains the actual data -->
					<ul class="menu inner-content-div">
					  <li><!-- start message -->
						<a href="#">
						  <div class="pull-left">
							<img src="../../../images/user2-160x160.jpg" class="rounded-circle" alt="User Image">
						  </div>
						  <div class="mail-contnet">
							 <h4>
							  Lorem Ipsum
							  <small><i class="fa fa-clock-o"></i> 15 mins</small>
							 </h4>
							 <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
						  </div>
						</a>
					  </li>
					  <!-- end message -->
					  <li>
						<a href="#">
						  <div class="pull-left">
							<img src="../../../images/user3-128x128.jpg" class="rounded-circle" alt="User Image">
						  </div>
						  <div class="mail-contnet">
							 <h4>
							  Nullam tempor
							  <small><i class="fa fa-clock-o"></i> 4 hours</small>
							 </h4>
							 <span>Curabitur facilisis erat quis metus congue viverra.</span>
						  </div>
						</a>
					  </li>
					  <li>
						<a href="#">
						  <div class="pull-left">
							<img src="../../../images/user4-128x128.jpg" class="rounded-circle" alt="User Image">
						  </div>
						  <div class="mail-contnet">
							 <h4>
							  Proin venenatis
							  <small><i class="fa fa-clock-o"></i> Today</small>
							 </h4>
							 <span>Vestibulum nec ligula nec quam sodales rutrum sed luctus.</span>
						  </div>
						</a>
					  </li>
					  <li>
						<a href="#">
						  <div class="pull-left">
							<img src="../../../images/user3-128x128.jpg" class="rounded-circle" alt="User Image">
						  </div>
						  <div class="mail-contnet">
							 <h4>
							  Praesent suscipit
							<small><i class="fa fa-clock-o"></i> Yesterday</small>
							 </h4>
							 <span>Curabitur quis risus aliquet, luctus arcu nec, venenatis neque.</span>
						  </div>
						</a>
					  </li>
					  <li>
						<a href="#">
						  <div class="pull-left">
							<img src="../../../images/user4-128x128.jpg" class="rounded-circle" alt="User Image">
						  </div>
						  <div class="mail-contnet">
							 <h4>
							  Donec tempor
							  <small><i class="fa fa-clock-o"></i> 2 days</small>
							 </h4>
							 <span>Praesent vitae tellus eget nibh lacinia pretium.</span>
						  </div>
						</a>
					  </li>
					</ul>
				  </li>
				  <li class="footer"><a href="#">See all e-Mails</a></li>
				</ul>
			  </li>
			  <!-- Notifications -->
			  <li class="dropdown notifications-menu">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
				  <i class="mdi mdi-bell"></i>
				</a>
				<ul class="dropdown-menu scale-up">
				  <li class="header">You have 7 notifications</li>
				  <li>
					<!-- inner menu: contains the actual data -->
					<ul class="menu inner-content-div">
					  <li>
						<a href="#">
						  <i class="fa fa-users text-success"></i> Curabitur id eros quis nunc suscipit blandit.
						</a>
					  </li>
					  <li>
						<a href="#">
						  <i class="fa fa-warning text-warning"></i> Duis malesuada justo eu sapien elementum, in semper diam posuere.
						</a>
					  </li>
					  <li>
						<a href="#">
						  <i class="fa fa-users text-red"></i> Donec at nisi sit amet tortor commodo porttitor pretium a erat.
						</a>
					  </li>
					  <li>
						<a href="#">
						  <i class="fa fa-shopping-cart text-success"></i> In gravida mauris et nisi
						</a>
					  </li>
					  <li>
						<a href="#">
						  <i class="fa fa-user text-danger"></i> Praesent eu lacus in libero dictum fermentum.
						</a>
					  </li>
					  <li>
						<a href="#">
						  <i class="fa fa-user text-danger"></i> Nunc fringilla lorem 
						</a>
					  </li>
					  <li>
						<a href="#">
						  <i class="fa fa-user text-danger"></i> Nullam euismod dolor ut quam interdum, at scelerisque ipsum imperdiet.
						</a>
					  </li>
					</ul>
				  </li>
				  <li class="footer"><a href="#">View all</a></li>
				</ul>
			  </li>
			  <!-- Tasks -->
			  <li class="dropdown tasks-menu">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
				  <i class="mdi mdi-message"></i>
				</a>
				<ul class="dropdown-menu scale-up">
				  <li class="header">You have 6 tasks</li>
				  <li>
					<!-- inner menu: contains the actual data -->
					<ul class="menu inner-content-div">
					  <li><!-- Task item -->
						<a href="#">
						  <h3>
							Lorem ipsum dolor sit amet
							<small class="pull-right">30%</small>
						  </h3>
						  <div class="progress xs">
							<div class="progress-bar progress-bar-aqua" style="width: 30%" role="progressbar"
								 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
							  <span class="sr-only">30% Complete</span>
							</div>
						  </div>
						</a>
					  </li>
					  <!-- end task item -->
					  <li><!-- Task item -->
						<a href="#">
						  <h3>
							Vestibulum nec ligula
							<small class="pull-right">20%</small>
						  </h3>
						  <div class="progress xs">
							<div class="progress-bar progress-bar-danger" style="width: 20%" role="progressbar"
								 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
							  <span class="sr-only">20% Complete</span>
							</div>
						  </div>
						</a>
					  </li>
					  <!-- end task item -->
					  <li><!-- Task item -->
						<a href="#">
						  <h3>
							Donec id leo ut ipsum
							<small class="pull-right">70%</small>
						  </h3>
						  <div class="progress xs">
							<div class="progress-bar progress-bar-light-blue" style="width: 70%" role="progressbar"
								 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
							  <span class="sr-only">70% Complete</span>
							</div>
						  </div>
						</a>
					  </li>
					  <!-- end task item -->
					  <li><!-- Task item -->
						<a href="#">
						  <h3>
							Praesent vitae tellus
							<small class="pull-right">40%</small>
						  </h3>
						  <div class="progress xs">
							<div class="progress-bar progress-bar-yellow" style="width: 40%" role="progressbar"
								 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
							  <span class="sr-only">40% Complete</span>
							</div>
						  </div>
						</a>
					  </li>
					  <!-- end task item -->
					  <li><!-- Task item -->
						<a href="#">
						  <h3>
							Nam varius sapien
							<small class="pull-right">80%</small>
						  </h3>
						  <div class="progress xs">
							<div class="progress-bar progress-bar-red" style="width: 80%" role="progressbar"
								 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
							  <span class="sr-only">80% Complete</span>
							</div>
						  </div>
						</a>
					  </li>
					  <!-- end task item -->
					  <li><!-- Task item -->
						<a href="#">
						  <h3>
							Nunc fringilla
							<small class="pull-right">90%</small>
						  </h3>
						  <div class="progress xs">
							<div class="progress-bar progress-bar-primary" style="width: 90%" role="progressbar"
								 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
							  <span class="sr-only">90% Complete</span>
							</div>
						  </div>
						</a>
					  </li>
					  <!-- end task item -->
					</ul>
				  </li>
				  <li class="footer">
					<a href="#">View all tasks</a>
				  </li>
				</ul>
			  </li>
			  <!-- User Account -->
			  <li class="dropdown user user-menu">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
				  <img src="../../../images/user5-128x128.jpg" class="user-image rounded-circle" alt="User Image">
				</a>
				<ul class="dropdown-menu scale-up">
				  <!-- User image -->
				  <li class="user-header">
					<img src="../../../images/user5-128x128.jpg" class="float-left rounded-circle" alt="User Image">

					<p>
					  Juliya Brus
					  <small class="mb-5">jb@gmail.com</small>
					  <a href="#" class="btn btn-danger btn-sm btn-rounded">View Profile</a>
					</p>
				  </li>
				  <!-- Menu Body -->
				  <li class="user-body">
					<div class="row no-gutters">
					  <div class="col-12 text-left">
						<a href="#"><i class="ion ion-person"></i> My Profile</a>
					  </div>
					  <div class="col-12 text-left">
						<a href="#"><i class="ion ion-email-unread"></i> Inbox</a>
					  </div>
					  <div class="col-12 text-left">
						<a href="#"><i class="ion ion-settings"></i> Setting</a>
					  </div>
					<div role="separator" class="divider col-12"></div>
					  <div class="col-12 text-left">
						<a href="#"><i class="ti-settings"></i> Account Setting</a>
					  </div>
					<div role="separator" class="divider col-12"></div>
					  <div class="col-12 text-left">
						<a href="#"><i class="fa fa-power-off"></i> Logout</a>
					  </div>				
					</div>
					<!-- /.row -->
				  </li>
				</ul>
			  </li>
			  <!-- Control Sidebar Toggle Button -->
			  <li>
				<a href="#" data-toggle="control-sidebar"><i class="fa fa-cog fa-spin"></i></a>
			  </li>
			</ul>
		  </div>
		</nav>	
	</div> 
  </header> 
  
  <!-- Main Navbar -->
  <div class="main-nav">  	
	  <nav class="navbar navbar-expand-lg">
		  <div class="collapse navbar-collapse" id="navbarNavDropdown">
			<ul class="navbar-nav">
			  <li class="nav-item">
				<a class="nav-link" href="../../index.html"><i class="fa fa-dashboard mr-5"></i> <span>Dashboard</span></a>
			  </li>
			  <li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				  <i class="fa fa-th mr-5"></i> <span>App</span>
				</a>				  
				<ul class="dropdown-menu multilevel scale-up-left">
				  <li class="nav-item"><a class="nav-link" href="../app/app-chat.html">Chat app</a></li>
				  <li class="nav-item"><a class="nav-link" href="../app/app-contact.html">Contact / Employee</a></li>	
				  <li class="nav-item"><a class="nav-link" href="../app/app-ticket.html">Support Ticket</a></li>	
				  <li class="nav-item"><a class="nav-link" href="../app/calendar.html">Calendar</a></li>	
				  <li class="nav-item"><a class="nav-link" href="../app/profile.html">Profile</a></li>	
				  <li class="nav-item"><a class="nav-link" href="../app/userlist-grid.html">Userlist Grid</a></li>
				  <li class="nav-item"><a class="nav-link" href="../app/userlist.html">Userlist</a></li>	
				  <li class="nav-item"><a class="nav-link" href="../email/index.html">Emails</a></li>				  
				</ul>				  
			  </li>	
			  <li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				  <i class="fa fa-envelope mr-5"></i> <span>Mailbox</span>
				</a>				  
				<ul class="dropdown-menu multilevel scale-up-left">
				  <li class="nav-item"><a class="nav-link" href="../mailbox/mailbox.html">Inbox</a></li>
				  <li class="nav-item"><a class="nav-link" href="../mailbox/compose.html">Compose</a></li>	
				  <li class="nav-item"><a class="nav-link" href="../mailbox/read-mail.html">Read</a></li>				  
				</ul>				  
			  </li>
			  <li class="nav-item dropdown m-menu m-fix">
				<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				  <i class="fa fa-bars mr-5"></i> <span>Forms & Widgets</span>
				</a>
				<div class="dropdown-menu menu-mega mega-menu-auto scale-up-left">
				  	<ul class="menu-mega-child one-half list-unstyled">
						<li>
							<a class="nav-link" href="../forms/advanced.html" title=""><i class="fa fa-address-book mr-15"></i>Advanced Elements</a>
						</li>
						<li>
							<a class="nav-link" href="../forms/code-editor.html" title=""><i class="fa fa-code mr-15"></i>Code Editor</a>
						</li>
						<li>
							<a class="nav-link" href="../forms/editor-markdown.html" title=""><i class="fa fa-code-fork mr-15"></i>Markdown</a>
						</li>
						<li>
							<a class="nav-link" href="../forms/editors.html" title=""><i class="fa fa-cog mr-15"></i>Editors</a>
						</li>
						<li>
							<a class="nav-link" href="../forms/form-validation.html" title=""><i class="fa fa-check-square-o mr-15"></i>Form Validation</a>
						</li>
						<li>
							<a class="nav-link" href="../forms/form-wizard.html" title=""><i class="fa fa-ellipsis-h mr-15"></i>Form Wizard</a>
						</li>
						<li>
							<a class="nav-link" href="../forms/general.html" title=""><i class="fa fa-eraser mr-15"></i>General Elements</a>
						</li>
						<li>
							<a class="nav-link" href="../forms/mask.html" title=""><i class="fa fa-cubes mr-15"></i>Formatter</a>
						</li>
						<li>
							<a class="nav-link" href="../forms/xeditable.html" title=""><i class="fa fa-file-code-o mr-15"></i>Xeditable Editor</a>
						</li>						
					</ul><!-- /.menu-mega-child one-four -->
					<ul class="menu-mega-child one-half list-unstyled">						
						<li>
							<a class="nav-link" href="../widgets/blog.html" title=""><i class="fa fa-flag mr-15"></i>Blog</a>
						</li>

						<li>
							<a class="nav-link" href="../widgets/chart.html" title=""><i class="fa fa-line-chart mr-15"></i>Chart</a>
						</li>
						<li>
							<a class="nav-link" href="../widgets/list.html" title=""><i class="fa fa-list mr-15"></i>List</a>
						</li>
						<li>
							<a class="nav-link" href="../widgets/social.html" title=""><i class="fa fa-share-alt mr-15"></i>Social</a>
						</li>
						<li>
							<a class="nav-link" href="../widgets/statistic.html" title=""><i class="fa fa-sitemap mr-15"></i>Statistic</a>
						</li>
						<li>
							<a class="nav-link" href="../widgets/weather.html" title=""><i class="fa fa-cloud mr-15"></i>Weather</a>
						</li>
						<li>
							<a class="nav-link" href="../widgets/widgets.html" title=""><i class="fa fa-comments-o mr-15"></i>Widgets</a>
						</li>
					</ul><!-- /.menu-mega-child one-four -->				
					
				</div>
				  
			  </li>
			  <li class="nav-item dropdown m-menu m-fix active">
				<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="active-item-here"></span>
				  <i class="fa fa-table mr-5"></i> <span>Charts & Tables</span>
				</a>
				<div class="dropdown-menu menu-mega mega-menu-auto scale-up-left">
				  	<ul class="menu-mega-child one-half list-unstyled">
						<li>
							<a class="nav-link" href="../charts/chartjs.html" title=""><i class="fa fa-bar-chart mr-15"></i>ChartJS</a>
						</li>
						<li>
							<a class="nav-link" href="../charts/flot.html" title=""><i class="fa fa-area-chart mr-15"></i>Flot</a>
						</li>
						<li>
							<a class="nav-link" href="../charts/inline.html" title=""><i class="fa fa-pie-chart mr-15"></i>Inline charts</a>
						</li>
						<li>
							<a class="nav-link" href="../charts/morris.html" title=""><i class="fa fa-bar-chart-o mr-15"></i>Morris</a>
						</li>
						<li>
							<a class="nav-link" href="../charts/peity.html" title=""><i class="fa fa-pie-chart mr-15"></i>Peity</a>
						</li>
					</ul><!-- /.menu-mega-child one-four -->
					<ul class="menu-mega-child one-half list-unstyled">
						<li>
							<a class="nav-link" href="../tables/simple.html" title=""><i class="fa fa-table mr-15"></i>Simple tables</a>
						</li>
						<li>
							<a class="nav-link" href="../tables/data.html" title=""><i class="fa fa-th mr-15"></i>Data tables</a>
						</li>
						<li>
							<a class="nav-link active" href="../tables/editable-tables.html" title=""><i class="fa fa-th-list mr-15"></i>Editable Tables</a>
						</li>
						<li>
							<a class="nav-link" href="../tables/table-color.html" title=""><i class="fa fa-paint-brush mr-15"></i>Table Color</a>
						</li>
					</ul><!-- /.menu-mega-child one-four -->				
					
				</div>
				  
			  </li>
			  
			  <li class="nav-item dropdown m-menu">
				<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				  <i class="fa fa-laptop mr-5"></i> <span>UI Elements</span>
				</a>
				<div class="dropdown-menu menu-mega scale-up-down">
				  
					<ul class="menu-mega-child one-four list-unstyled">
						<li>
							<a class="nav-link" href="../UI/badges.html" title=""><i class="fa fa-certificate mr-15"></i>Badges</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/border-utilities.html" title=""><i class="fa fa-window-minimize mr-15"></i>Border</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/buttons.html" title=""><i class="fa fa-minus mr-15"></i>Buttons</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/bootstrap-switch.html" title=""><i class="fa fa-toggle-on mr-15"></i>Bootstrap Switch</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/cards.html" title=""><i class="fa fa-user-circle mr-15"></i>User Card</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/color-utilities.html" title=""><i class="fa fa-paint-brush mr-15"></i>Color</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/date-paginator.html" title=""><i class="fa fa-ellipsis-h mr-15"></i>Date Paginator</a>
						</li>
					</ul><!-- /.menu-mega-child one-four -->
					<ul class="menu-mega-child one-four list-unstyled">
						<li>
							<a class="nav-link" href="../UI/dropdown.html" title=""><i class="fa fa-check mr-15"></i>Dropdown</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/dropdown-grid.html" title=""><i class="fa fa-check-square-o mr-15"></i>Dropdown Grid</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/general.html" title=""><i class="fa fa-clone mr-15"></i>General</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/icons.html" title=""><i class="fa fa-italic mr-15"></i>Icons</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/media-advanced.html" title=""><i class="fa fa-file mr-15"></i>Advanced Medias</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/modals.html" title=""><i class="fa fa-unlink mr-15"></i>Modals</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/nestable.html" title=""><i class="fa fa-th-list mr-15"></i>Nestable</a>
						</li>
					</ul><!-- /.menu-mega-child one-four -->
					<ul class="menu-mega-child one-four list-unstyled">
						<li>
							<a class="nav-link" href="../UI/notification.html" title=""><i class="fa fa-indent mr-15"></i>Notification</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/portlet-draggable.html" title=""><i class="fa fa-list mr-15"></i>Draggable Portlets</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/ribbons.html" title=""><i class="fa fa-clipboard mr-15"></i>Ribbons</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/sliders.html" title=""><i class="fa fa-sliders mr-15"></i>Sliders</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/sweatalert.html" title=""><i class="fa fa-window-maximize mr-15"></i>Sweet Alert</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/tab.html" title=""><i class="fa fa-sticky-note mr-15"></i>Tabs</a>
						</li>
						<li>
							<a class="nav-link" href="../UI/timeline.html" title=""><i class="fa fa-object-group mr-15"></i>Timeline</a>
						</li>
					</ul><!-- /.menu-mega-child one-four -->
					<ul class="menu-mega-child one-four list-unstyled">
						<li>
							<a class="nav-link" href="../UI/timeline-horizontal.html" title=""><i class="fa fa-object-group mr-15"></i>Horizontal Timeline</a>
						</li>
						<li>
							<a class="nav-link" href="../extension/fullscreen.html" title=""><i class="fa fa-television mr-15"></i>Fullscreen</a>
						</li>
						<li>
							<a class="nav-link" href="../box/advanced.html" title=""><i class="fa fa-square mr-15"></i>Box Advanced</a>
						</li>
						<li>
							<a class="nav-link" href="../box/basic.html" title=""><i class="fa fa-square-o mr-15"></i>Box Basic</a>
						</li>
						<li>
							<a class="nav-link" href="../box/color.html" title=""><i class="fa fa-paint-brush mr-15"></i>Box Color</a>
						</li>
						<li>
							<a class="nav-link" href="../box/group.html" title=""><i class="fa fa-window-restore mr-15"></i>Box Group</a>
						</li>
					</ul><!-- /.menu-mega-child one-four -->
					
				</div>
				  
			  </li>				  
			  <li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				  Extra Pages
				</a>
				  
				<ul class="dropdown-menu multilevel scale-up-left">
				  <li class="nav-item"><a class="nav-link" href="../map/map-google.html">Google Map</a></li>
				  <li class="nav-item"><a class="nav-link" href="../map/map-vector.html">Vector Map</a></li>
				  <li class="nav-item dropdown"><a class="nav-link dropdown-item dropdown-toggle" href="#">Sample Pages</a>
					<ul class="dropdown-menu">
					  <li><a class="dropdown-item nav-link" href="../samplepage/blank.html">Blank</a></li>
					  <li><a class="dropdown-item nav-link" href="../samplepage/coming-soon.html">Coming Soon</a></li>
					  <li><a class="dropdown-item nav-link" href="../samplepage/custom-scroll.html">Custom Scrolls</a></li>
					  <li><a class="dropdown-item nav-link" href="../samplepage/faq.html">FAQ</a></li>
					  <li><a class="dropdown-item nav-link" href="../samplepage/gallery.html">Gallery</a></li>
					  <li><a class="dropdown-item nav-link" href="../samplepage/invoice.html">Invoice</a></li>
					  <li><a class="dropdown-item nav-link" href="../samplepage/lightbox.html">Lightbox Popup</a></li>
					  <li><a class="dropdown-item nav-link" href="../samplepage/pace.html">Pace</a></li>
					  <li><a class="dropdown-item nav-link" href="../samplepage/pricing.html">Pricing</a></li>					  

					  <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle nav-link" href="#">Authentication</a>
						<ul class="dropdown-menu">
						  <li><a class="dropdown-item nav-link" href="../samplepage/login.html">Login</a></li>
						  <li><a class="dropdown-item nav-link" href="../samplepage/register.html">Register</a></li>
						  <li><a class="dropdown-item nav-link" href="../samplepage/lockscreen.html">Lockscreen</a></li>
						  <li><a class="dropdown-item nav-link" href="../samplepage/user-pass.html">Recover password</a></li>
						</ul>
					  </li>
					  <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle nav-link" href="#">Error Pages</a>
						<ul class="dropdown-menu">
						  <li><a class="dropdown-item nav-link" href="../samplepage/404.html">404</a></li>
						  <li><a class="dropdown-item nav-link" href="../samplepage/500.html">500</a></li>
						  <li><a class="dropdown-item nav-link" href="../samplepage/maintenance.html">Maintenance</a></li>
						</ul>
					  </li>
           			</ul>
				  </li>
				</ul>				  
			  </li>
			  		  
			</ul>
		  </div>
		</nav>	  
  </div>

  
  
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Editable Tables
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item"><a href="#">Tables</a></li>
        <li class="breadcrumb-item active">Editable Tables</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
     
      <div class="row">
		  <div class="col-lg-4 col-12">
			  <div class="box">
				<div class="box-header">
			  		<h4 class="box-title"><strong>Simple Editable</strong> table</h4>
					<h6 class="subtitle">Just click on word which you want to change and enter</h6>
				</div>
			  <div class="box-body">				
				<div class="table-responsive">
						<table id="mainTable" class="table editable-table table-bordered mb-0">
							<thead>
								<tr>
									<th>Name</th>
									<th>Cost</th>
									<th>Profit</th>
									<th>Fun</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>Car</td>
									<td>100</td>
									<td>200</td>
									<td>0</td>
								</tr>
								<tr>
									<td>Bike</td>
									<td>330</td>
									<td>240</td>
									<td>1</td>
								</tr>
								<tr>
									<td>Plane</td>
									<td>430</td>
									<td>540</td>
									<td>3</td>
								</tr>
								<tr>
									<td>Yacht</td>
									<td>100</td>
									<td>200</td>
									<td>0</td>
								</tr>
								<tr>
									<td>Segway</td>
									<td>330</td>
									<td>240</td>
									<td>1</td>
								</tr>
								<tr>
									<td>Car</td>
									<td>100</td>
									<td>200</td>
									<td>0</td>
								</tr>
								<tr>
									<td>Bike</td>
									<td>330</td>
									<td>240</td>
									<td>1</td>
								</tr>
								<tr>
									<td>Plane</td>
									<td>430</td>
									<td>540</td>
									<td>3</td>
								</tr>
								<tr>
									<td>Yacht</td>
									<td>100</td>
									<td>200</td>
									<td>0</td>
								</tr>
								<tr>
									<td>Segway</td>
									<td>330</td>
									<td>240</td>
									<td>1</td>
								</tr>
								<tr>
									<td>Car</td>
									<td>100</td>
									<td>200</td>
									<td>0</td>
								</tr>
								<tr>
									<td>Bike</td>
									<td>330</td>
									<td>240</td>
									<td>1</td>
								</tr>
								<tr>
									<td>Yacht</td>
									<td>100</td>
									<td>200</td>
									<td>0</td>
								</tr>
								<tr>
									<td>Segway</td>
									<td>330</td>
									<td>240</td>
									<td>1</td>
								</tr>
							</tbody>
							<tfoot>
								<tr>
									<th><strong>TOTAL</strong></th>
									<th></th>
									<th></th>
									<th></th>
								</tr>
							</tfoot>
						</table>
					</div>
			  </div>
			</div>
		</div>
		  
		<div class="col-lg-8 col-12">
		  	<div class="box">
				<div class="box-header">
          			<h4 class="box-title">Editable with <strong>Datatable</strong></h4>	
					<h6 class="subtitle">Just click on word which you want to change and enter</h6>
				</div>

          <div class="box-body">
			  <div class="table-responsive">
				<table id="example1" class="table table-bordered table-separated">
					<thead>
						<tr>
							<th>Name</th>
							<th>Position</th>
							<th>Office</th>
							<th>Age</th>
							<th>Start date</th>
							<th>Salary</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Tiger Nixon</td>
							<td>System Architect</td>
							<td>Edinburgh</td>
							<td>61</td>
							<td>2011/04/25</td>
							<td>$320,800</td>
						</tr>
						<tr>
							<td>Garrett Winters</td>
							<td>Accountant</td>
							<td>Tokyo</td>
							<td>63</td>
							<td>2011/07/25</td>
							<td>$170,750</td>
						</tr>
						<tr>
							<td>Ashton Cox</td>
							<td>Junior Technical Author</td>
							<td>San Francisco</td>
							<td>66</td>
							<td>2009/01/12</td>
							<td>$86,000</td>
						</tr>
						<tr>
							<td>Cedric Kelly</td>
							<td>Senior Javascript Developer</td>
							<td>Edinburgh</td>
							<td>22</td>
							<td>2012/03/29</td>
							<td>$433,060</td>
						</tr>
						<tr>
							<td>Airi Satou</td>
							<td>Accountant</td>
							<td>Tokyo</td>
							<td>33</td>
							<td>2008/11/28</td>
							<td>$162,700</td>
						</tr>
						<tr>
							<td>Brielle Williamson</td>
							<td>Integration Specialist</td>
							<td>New York</td>
							<td>61</td>
							<td>2012/12/02</td>
							<td>$372,000</td>
						</tr>
						<tr>
							<td>Herrod Chandler</td>
							<td>Sales Assistant</td>
							<td>San Francisco</td>
							<td>59</td>
							<td>2012/08/06</td>
							<td>$137,500</td>
						</tr>
						<tr>
							<td>Rhona Davidson</td>
							<td>Integration Specialist</td>
							<td>Tokyo</td>
							<td>55</td>
							<td>2010/10/14</td>
							<td>$327,900</td>
						</tr>
						<tr>
							<td>Colleen Hurst</td>
							<td>Javascript Developer</td>
							<td>San Francisco</td>
							<td>39</td>
							<td>2009/09/15</td>
							<td>$205,500</td>
						</tr>
						<tr>
							<td>Sonya Frost</td>
							<td>Software Engineer</td>
							<td>Edinburgh</td>
							<td>23</td>
							<td>2008/12/13</td>
							<td>$103,600</td>
						</tr>
						<tr>
							<td>Jena Gaines</td>
							<td>Office Manager</td>
							<td>London</td>
							<td>30</td>
							<td>2008/12/19</td>
							<td>$90,560</td>
						</tr>
						<tr>
							<td>Quinn Flynn</td>
							<td>Support Lead</td>
							<td>Edinburgh</td>
							<td>22</td>
							<td>2013/03/03</td>
							<td>$342,000</td>
						</tr>
						<tr>
							<td>Charde Marshall</td>
							<td>Regional Director</td>
							<td>San Francisco</td>
							<td>36</td>
							<td>2008/10/16</td>
							<td>$470,600</td>
						</tr>
						<tr>
							<td>Haley Kennedy</td>
							<td>Senior Marketing Designer</td>
							<td>London</td>
							<td>43</td>
							<td>2012/12/18</td>
							<td>$313,500</td>
						</tr>
						<tr>
							<td>Tatyana Fitzpatrick</td>
							<td>Regional Director</td>
							<td>London</td>
							<td>19</td>
							<td>2010/03/17</td>
							<td>$385,750</td>
						</tr>
						<tr>
							<td>Michael Silva</td>
							<td>Marketing Designer</td>
							<td>London</td>
							<td>66</td>
							<td>2012/11/27</td>
							<td>$198,500</td>
						</tr>
						<tr>
							<td>Paul Byrd</td>
							<td>Chief Financial Officer (CFO)</td>
							<td>New York</td>
							<td>64</td>
							<td>2010/06/09</td>
							<td>$725,000</td>
						</tr>
						<tr>
							<td>Gloria Little</td>
							<td>Systems Administrator</td>
							<td>New York</td>
							<td>59</td>
							<td>2009/04/10</td>
							<td>$237,500</td>
						</tr>
						<tr>
							<td>Bradley Greer</td>
							<td>Software Engineer</td>
							<td>London</td>
							<td>41</td>
							<td>2012/10/13</td>
							<td>$132,000</td>
						</tr>
						<tr>
							<td>Dai Rios</td>
							<td>Personnel Lead</td>
							<td>Edinburgh</td>
							<td>35</td>
							<td>2012/09/26</td>
							<td>$217,500</td>
						</tr>
						<tr>
							<td>Jenette Caldwell</td>
							<td>Development Lead</td>
							<td>New York</td>
							<td>30</td>
							<td>2011/09/03</td>
							<td>$345,000</td>
						</tr>
						<tr>
							<td>Yuri Berry</td>
							<td>Chief Marketing Officer (CMO)</td>
							<td>New York</td>
							<td>40</td>
							<td>2009/06/25</td>
							<td>$675,000</td>
						</tr>
						<tr>
							<td>Caesar Vance</td>
							<td>Pre-Sales Support</td>
							<td>New York</td>
							<td>21</td>
							<td>2011/12/12</td>
							<td>$106,450</td>
						</tr>
						<tr>
							<td>Doris Wilder</td>
							<td>Sales Assistant</td>
							<td>Sidney</td>
							<td>23</td>
							<td>2010/09/20</td>
							<td>$85,600</td>
						</tr>
						<tr>
							<td>Angelica Ramos</td>
							<td>Chief Executive Officer (CEO)</td>
							<td>London</td>
							<td>47</td>
							<td>2009/10/09</td>
							<td>$1,200,000</td>
						</tr>
						<tr>
							<td>Gavin Joyce</td>
							<td>Developer</td>
							<td>Edinburgh</td>
							<td>42</td>
							<td>2010/12/22</td>
							<td>$92,575</td>
						</tr>
						<tr>
							<td>Jennifer Chang</td>
							<td>Regional Director</td>
							<td>Singapore</td>
							<td>28</td>
							<td>2010/11/14</td>
							<td>$357,650</td>
						</tr>
						<tr>
							<td>Brenden Wagner</td>
							<td>Software Engineer</td>
							<td>San Francisco</td>
							<td>28</td>
							<td>2011/06/07</td>
							<td>$206,850</td>
						</tr>
						<tr>
							<td>Fiona Green</td>
							<td>Chief Operating Officer (COO)</td>
							<td>San Francisco</td>
							<td>48</td>
							<td>2010/03/11</td>
							<td>$850,000</td>
						</tr>
						<tr>
							<td>Shou Itou</td>
							<td>Regional Marketing</td>
							<td>Tokyo</td>
							<td>20</td>
							<td>2011/08/14</td>
							<td>$163,000</td>
						</tr>
						<tr>
							<td>Michelle House</td>
							<td>Integration Specialist</td>
							<td>Sidney</td>
							<td>37</td>
							<td>2011/06/02</td>
							<td>$95,400</td>
						</tr>
						<tr>
							<td>Suki Burks</td>
							<td>Developer</td>
							<td>London</td>
							<td>53</td>
							<td>2009/10/22</td>
							<td>$114,500</td>
						</tr>
						<tr>
							<td>Prescott Bartlett</td>
							<td>Technical Author</td>
							<td>London</td>
							<td>27</td>
							<td>2011/05/07</td>
							<td>$145,000</td>
						</tr>
						<tr>
							<td>Gavin Cortez</td>
							<td>Team Leader</td>
							<td>San Francisco</td>
							<td>22</td>
							<td>2008/10/26</td>
							<td>$235,500</td>
						</tr>
						<tr>
							<td>Martena Mccray</td>
							<td>Post-Sales support</td>
							<td>Edinburgh</td>
							<td>46</td>
							<td>2011/03/09</td>
							<td>$324,050</td>
						</tr>
						<tr>
							<td>Unity Butler</td>
							<td>Marketing Designer</td>
							<td>San Francisco</td>
							<td>47</td>
							<td>2009/12/09</td>
							<td>$85,675</td>
						</tr>
						<tr>
							<td>Howard Hatfield</td>
							<td>Office Manager</td>
							<td>San Francisco</td>
							<td>51</td>
							<td>2008/12/16</td>
							<td>$164,500</td>
						</tr>
						<tr>
							<td>Hope Fuentes</td>
							<td>Secretary</td>
							<td>San Francisco</td>

							<td>41</td>
							<td>2010/02/12</td>
							<td>$109,850</td>
						</tr>
						<tr>
							<td>Vivian Harrell</td>
							<td>Financial Controller</td>
							<td>San Francisco</td>
							<td>62</td>
							<td>2009/02/14</td>
							<td>$452,500</td>
						</tr>
						<tr>
							<td>Timothy Mooney</td>
							<td>Office Manager</td>

							<td>London</td>
							<td>37</td>
							<td>2008/12/11</td>
							<td>$136,200</td>
						</tr>
						<tr>
							<td>Jackson Bradshaw</td>
							<td>Director</td>
							<td>New York</td>
							<td>65</td>
							<td>2008/09/26</td>
							<td>$645,750</td>
						</tr>
						<tr>
							<td>Olivia Liang</td>
							<td>Support Engineer</td>
							<td>Singapore</td>
							<td>64</td>
							<td>2011/02/03</td>
							<td>$234,500</td>
						</tr>
						<tr>
							<td>Bruno Nash</td>
							<td>Software Engineer</td>
							<td>London</td>
							<td>38</td>
							<td>2011/05/03</td>
							<td>$163,500</td>
						</tr>
						<tr>
							<td>Sakura Yamamoto</td>
							<td>Support Engineer</td>
							<td>Tokyo</td>
							<td>37</td>
							<td>2009/08/19</td>
							<td>$139,575</td>
						</tr>
						<tr>
							<td>Thor Walton</td>
							<td>Developer</td>
							<td>New York</td>
							<td>61</td>
							<td>2013/08/11</td>
							<td>$98,540</td>
						</tr>
						<tr>
							<td>Finn Camacho</td>
							<td>Support Engineer</td>
							<td>San Francisco</td>
							<td>47</td>
							<td>2009/07/07</td>
							<td>$87,500</td>
						</tr>
						<tr>
							<td>Serge Baldwin</td>
							<td>Data Coordinator</td>
							<td>Singapore</td>
							<td>64</td>
							<td>2012/04/09</td>
							<td>$138,575</td>
						</tr>
						<tr>
							<td>Zenaida Frank</td>
							<td>Software Engineer</td>
							<td>New York</td>
							<td>63</td>
							<td>2010/01/04</td>
							<td>$125,250</td>
						</tr>
						<tr>
							<td>Zorita Serrano</td>
							<td>Software Engineer</td>
							<td>San Francisco</td>
							<td>56</td>
							<td>2012/06/01</td>
							<td>$115,000</td>
						</tr>
						<tr>
							<td>Jennifer Acosta</td>
							<td>Junior Javascript Developer</td>
							<td>Edinburgh</td>
							<td>43</td>
							<td>2013/02/01</td>
							<td>$75,650</td>
						</tr>
						<tr>
							<td>Cara Stevens</td>
							<td>Sales Assistant</td>
							<td>New York</td>
							<td>46</td>
							<td>2011/12/06</td>
							<td>$145,600</td>
						</tr>
						<tr>
							<td>Hermione Butler</td>
							<td>Regional Director</td>
							<td>London</td>
							<td>47</td>
							<td>2011/03/21</td>
							<td>$356,250</td>
						</tr>
						<tr>
							<td>Lael Greer</td>
							<td>Systems Administrator</td>
							<td>London</td>
							<td>21</td>
							<td>2009/02/27</td>
							<td>$103,500</td>
						</tr>
						<tr>
							<td>Jonas Alexander</td>
							<td>Developer</td>
							<td>San Francisco</td>
							<td>30</td>
							<td>2010/07/14</td>
							<td>$86,500</td>
						</tr>
						<tr>
							<td>Shad Decker</td>
							<td>Regional Director</td>
							<td>Edinburgh</td>
							<td>51</td>
							<td>2008/11/13</td>
							<td>$183,000</td>
						</tr>
						<tr>
							<td>Michael Bruce</td>
							<td>Javascript Developer</td>
							<td>Singapore</td>
							<td>29</td>
							<td>2011/06/27</td>
							<td>$183,000</td>
						</tr>
						<tr>
							<td>Donna Snider</td>
							<td>Customer Support</td>
							<td>New York</td>
							<td>27</td>
							<td>2011/01/25</td>
							<td>$112,000</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<th>Name</th>
							<th>Position</th>
							<th>Office</th>
							<th>Age</th>
							<th>Start date</th>
							<th>Salary</th>
						</tr>
					</tfoot>
				  </table>
			  </div>
          </div>
        </div>
		</div>  
		  
      </div>
		
	  <div class="row">
	  			
	  </div>
      
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  
   <footer class="main-footer">
    <div class="pull-right d-none d-sm-inline-block">
        <ul class="nav nav-primary nav-dotted nav-dot-separated justify-content-center justify-content-md-end">
		  <li class="nav-item">
			<a class="nav-link" href="javascript:void(0)">FAQ</a>
		  </li>
		  <li class="nav-item">
			<a class="nav-link" href="#">Purchase Now</a>
		  </li>
		</ul>
    </div>
	  &copy; 2018 <a href="https://www.multipurposethemes.com/">Multi-Purpose Themes</a>. All Rights Reserved.
  </footer>
  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-light">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
      <li class="nav-item"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
      <li class="nav-item"><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-cog fa-spin"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <!-- Home tab content -->
      <div class="tab-pane" id="control-sidebar-home-tab">
        <h3 class="control-sidebar-heading">Recent Activity</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-birthday-cake bg-danger"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Admin Birthday</h4>

                <p>Will be July 24th</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-user bg-warning"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Jhone Updated His Profile</h4>

                <p>New Email : jhone_doe@demo.com</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-envelope-o bg-info"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Disha Joined Mailing List</h4>

                <p>disha@demo.com</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-file-code-o bg-success"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Code Change</h4>

                <p>Execution time 15 Days</p>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

        <h3 class="control-sidebar-heading">Tasks Progress</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Web Design
                <span class="label label-danger pull-right">40%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-danger" style="width: 40%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Update Data
                <span class="label label-success pull-right">75%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-success" style="width: 75%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Order Process
                <span class="label label-warning pull-right">89%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-warning" style="width: 89%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Development 
                <span class="label label-primary pull-right">72%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-primary" style="width: 72%"></div>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

      </div>
      <!-- /.tab-pane -->
      <!-- Stats tab content -->
      <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
      <!-- /.tab-pane -->
      <!-- Settings tab content -->
      <div class="tab-pane" id="control-sidebar-settings-tab">
        <form method="post">
          <h3 class="control-sidebar-heading">General Settings</h3>

          <div class="form-group">
            <input type="checkbox" id="report_panel" class="chk-col-grey" >
			<label for="report_panel" class="control-sidebar-subheading ">Report panel usage</label>

            <p>
              general settings information
            </p>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <input type="checkbox" id="allow_mail" class="chk-col-grey" >
			<label for="allow_mail" class="control-sidebar-subheading ">Mail redirect</label>

            <p>
              Other sets of options are available
            </p>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <input type="checkbox" id="expose_author" class="chk-col-grey" >
			<label for="expose_author" class="control-sidebar-subheading ">Expose author name</label>

            <p>
              Allow the user to show his name in blog posts
            </p>
          </div>
          <!-- /.form-group -->

          <h3 class="control-sidebar-heading">Chat Settings</h3>

          <div class="form-group">
            <input type="checkbox" id="show_me_online" class="chk-col-grey" >
			<label for="show_me_online" class="control-sidebar-subheading ">Show me as online</label>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <input type="checkbox" id="off_notifications" class="chk-col-grey" >
			<label for="off_notifications" class="control-sidebar-subheading ">Turn off notifications</label>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <label class="control-sidebar-subheading">              
              <a href="javascript:void(0)" class="text-red margin-r-5"><i class="fa fa-trash-o"></i></a>
              Delete chat history
            </label>
          </div>
          <!-- /.form-group -->
        </form>
      </div>
      <!-- /.tab-pane -->
    </div>
  </aside>
  <!-- /.control-sidebar -->
  
  <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

	<!-- jQuery 3 -->
	<script src="../../static/bower_components/jquery/dist/jquery.min.js"></script>
	
	
	<!-- Bootstrap 4.0-->
	<script src="../../static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../static/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	
	<!-- FastClick -->
	<script src="../../static/bower_components/fastclick/lib/fastclick.js"></script>
	
	<!-- This is data table -->
    <script src="../../static/bower_components/datatable/datatables.min.js"></script>
	
	<!-- Editable -->
    <script src="../../static/bower_components/tiny-editable/mindmup-editabletable.js"></script>
    <script src="../../static/bower_components/tiny-editable/numeric-input-example.js"></script>
    <script>
        $('#mainTable').editableTableWidget().numericInputExample().find('td:first').focus();
        $('#example1').editableTableWidget().numericInputExample().find('td:first').focus();
    </script>
	
	<!-- Fab Admin App -->
	<script src="../../static/bower_components/template.js"></script>
	
	<!-- Fab Admin for demo purposes -->
	<script src="../../static/bower_components/demo.js"></script>
	
	<!-- Fab admin horizontal-layout -->
	<script src="../../static/bower_components/horizontal-layout.js"></script>
	
	<!-- Fab Admin for Data Table -->
	<script src="../../static/bower_components/pages/data-table.js"></script>
	
	
</body>
</html>
